User blog:ZodiaDragon/Project Flow: Utilizing CSS to give Chat to Mobile Users
If you've been on the fanon chat at all today, you might have seen me going in and out of chat, occasionally mubmling about things working or not working (I may have also accidentally posted a couple of my notes to myself but that's besides the point). Anyways, I've been working at chat this morning to work on a different type of chat skin. I'm gonna start off with a couple of snapshots first: So you can probably easily see that this is on a mobile device (It's on an iPhone 5s running IOS 8). But if you look in the first picture, you can probably see that the Rail is off to the side, while, on the second picture, the Rail takes up most of the screen. That's using a :hover selector to bring it out (You tap on it / off of it to open / close in mobile). I decided to start this project because a lot of traffic goes through mobile, but you can't use chat on mobile without going to the full site. Even then, mobile chat is rather hard to use. The Write box is tiny and all the text is near impossible to read. My solution? Give the Chat Window and the Write box some more space. We only need the Rail when we want to see who's online and to switch between PMs, right? Exactly. With this solution, we can hide the Rail when we don't need it, and open up more space for the Chat Window and the Write Box, which is exactly what I did. In addition, I increased the text size of all of the text elements (excluding the Chat Header at the top), so it's easier to see. And the notification bubble (which shows the amount of missed messages) is moved over to be visible when the Rail is closed as well. So far, I've tested on an iPhone 5s, and I plan on testing from a Samsung Galaxy 4 (I think it's a 4), later. This edit doesn't work on screens that are large, though. It just looks pretty weird once you use it on a computer or tablet (Which don't need the mobile version, thankfully). Now here's the best part. I've tied this edit to my iMessage Chat Skin, and it works rather well (Besides the bubbles, which had problems on desktop as well, due to how messages are formatted). Because of this, I can confidently say that this works with existing chat skins. There is a little bad news though. Unfortunately, this doesn't really work well with Chat Hacks, since the buttons are made for the default size Write Bar. Feel free to go in and edit the code to see if you can make it work. That's all for the Mobile Version of Flow. Feel free to borrow and look into the code here. I also plan on making a Desktop / Tablet version of Project Flow that doesn't make the Write Bar taller, but still moves the Rail off to the side. It should have full Chat Hacks support and work much better with Chat Skins than the mobile version (Keep in mind that compatability is browser-based, which is why it can have different results on each device). Until then, I'm off. -Zodia Category:Blog posts